
<?php
	//start the session variable
	session_start();

	//if the username is set, go to the home page
	if(isset ($_SESSION['userName'])) {
		header('Location:./cameraRollHome.php');
		exit;
#		echo $_SESSION['userName'];
	}

?>
<html>
	<head>
		<title>
			Camera Roll
		</title>

	<link href="css/bootstrap.css" rel="stylesheet"> 
	<style>
		body {
			padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
		}
	</style> 
	<link href="css/bootstrap-responsive.css" rel="stylesheet"> 
	<link href="css/smoothness/jquery-ui-1.9.1.custom.css" rel="stylesheet">
	<link href="css/cameraRoll.css" rel="stylesheet">

	<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
	<script type="text/javascript" src="js/bootstrap.js"></script>
	<script type="text/javascript" src="js/jquery-ui-1.9.1.custom.js"></script>
	<script type="text/javascript" src="js/cameraRoll.js"></script>
	<script>
		$(document).ready(function(){
			$.cameraRoll.hideErrorFields();
			
			// Sign in dialog
			$.cameraRoll.buildDialog({
				selector: $('#signInPopup'),
				title: "Sign In"
			});

			// Sign up dialog
			$.cameraRoll.buildDialog({
				selector: $('#signUpPopup'),
				title: "Sign Up"
			});

			// Hide all dialog close x's
			$.cameraRoll.hideDialogClose();

			// Sign in link click to open dialog
			$('#signIn').click(function(){
				$.cameraRoll.openDialog($('#signInPopup'));
				return false;
			});

			// Sign up link click to open dialog
			$('#signUp').click(function(){
				$.cameraRoll.openDialog($('#signUpPopup'));
				return false;
			});

			// Write if statment for particular browsers that support placehoder.
			//$('label').css("display", "none");

			// Cancle button in Sign In to close dialog and reset inputs
			$('#signIn-cancel').click(function(event){
				event.preventDefault();
				$.cameraRoll.resetDialog({
					dialog: $('#signInPopup'),
					inputs: [$('#userName-signIn'), $('#password-signIn')]
				});
			});

			// Cancle button in Sign Up to close dialog and reset inputs
			$('#signUp-cancel').click(function(){
				$.cameraRoll.resetDialog({
					dialog: $('#signUpPopup'),
					inputs: [$('#userName-signUp'), $('#email-signUp'), $('#confirmEmail-signUp'), $('#password-signUp')]
				});
			});
			
			// Sign in button click 
			$('#signIn-submit').click(function(event) {
				event.preventDefault();
				$.cameraRoll.login({
					userName: $('#userName-signIn'),
					password: $('#password-signIn'),
					errorField: $('#error-signIn')
				});
			});

			//submit when "Return" used on keyboard when in username box
			$('#username-signIn').keyup(function(event) {
				if(event.keyCode == 13){
					$('#signIn-submit').click();
				}
			});

			//submit when "Return" used on keyboard when in password box
			$('#password-signIn').keyup(function(event) {
				if(event.keyCode == 13){
					$('#signIn-submit').click();
				}
			});

			//create the CameraRollCarousel object
			$('#CameraRollCarousel').carousel({
				interval: 5000,
			});

			$('#signUp-submit').click(function(){
				$.cameraRoll.signUp({
					userSettings: {
						userName: $('#userName-signUp').val(),
						email: $('#email-signUp').val(),
						confirmEmail: $('#confirmEmail-signUp').val(),
						password: $('#password-signUp').val()
					},
					emailBox: $('#email-signUp'),
					confirmEmailBox: $('#confirmEmail-signUp'),
					userError: $('#userExists')
				});
			});

			$('#confirmEmail-signUp').blur(function(){
				if($(this).val() == $('#email-signUp').val()){
					$(this).removeClass();
				}
			});

			$('#email-signUp').blur(function(){
				if($.cameraRoll.validateEmail($(this).val())){
					$(this).removeClass();
				}
			});

		}); //close document ready tag
		
	</script>
	</head>

	<body>
		<!--Navbar-->
		<div id="header" class="navbar navbar-fixed-top">
			<div id="inner" class="navbar-inner">
				<div id="cont" class="container">		
					<a id="navbar" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
					        <span class="icon-bar"></span>
					        <span class="icon-bar"></span>
					        <span class="icon-bar"></span>
					</a>
					<a id="brand" class="brand" href="./~meuniern/my-camara-roll/CameraRoll/cameraroll.html" style="font-family: Copperplate">
						<img class="brandImage" src="./images/longShortCameraRoll.png">	
					</a>	
					<div class="nav-collapse" style="height:auto;">
						<ul id="navlist" class="nav">
							<li id="signIn">
								<a href="/" style="font-family: Impact">Sign In</a>
							</li>
						</ul>
					</div>
				</div>	
			</div>
		</div>

		<!--Sign Up box-->
		<div id="signUp" class="span3 signUpBox">
			<div id="userExists" class="error">
				<p>*User already exists</p>
			</div>
			<form action="cameraRollPhp/signUp.php">
				<center>
					<label for="userName-signUp" style="font-family: Impact">User Name:</label><input type = "text" id = "userName-signUp" name="userName-signUp" placeholder="User Name" />
					<label for="email-signUp" style="font-family: Impact">Email:</label><input type = "email" id = "email-signUp" name="email-signUp" placeholder="example@email.com"/>
					<label for="confirmEmail-signUp" style="font-family: Impact">Confirm Email:</label><input type = "email" id = "confirmEmail-signUp" name="confirmEmail-signUp" placeholder="Confirm Email"/>
					<label for="password-signUp" style="font-family: Impact" >Password:</label><input type = "password" id = "password-signUp" name="password-signUp" placeholder="Password"/>
					<br />
					<button class="btn btn-primary" type="button" value="Sign Up" id="signUp-submit">Sign Up</button>
					<button class="btn" type="button" value="Cancel" id="signUp-cancel">Cancel</button>
				</center>
			</form>
		</div>

		<!--Picture carousel-->
		<div id="CameraRollCarousel" class="carousel slide span6 carouselBorder">
			<!-- Carousel items -->
			<div class="carousel-inner">
				<center>
					<div class="active item carouselProps"><img src="./users/guest/default/flowerMountains.jpeg"></div>
					<div class="item carouselProps"><img src="./users/guest/default/glacierLake.jpeg"></div>
					<div class="item carouselProps"><img src="./users/guest/default/glacierMountains.jpeg"></div>
					<div class="item carouselProps"><img src="./users/guest/default/hillsSky.jpeg"></div>
					<div class="item carouselProps"><img src="./users/guest/default/lakeMountains.jpeg"></div>
					<div class="item carouselProps"><img src="./users/guest/default/rainbowMountains.jpeg"></div>
					<div class="item carouselProps"><img src="./users/guest/default/snakeRiver.jpeg"></div>
					<div class="item carouselProps"><img src="./users/guest/default/yellowstoneFire.gif"></div>
				</cetner>
			</div>
			<!-- Carousel nav -->
			<a class="carousel-control left" href="#CameraRollCarousel" data-slide="prev">&lsaquo;</a>
			<a class="carousel-control right" href="#CameraRollCarousel" data-slide="next">&rsaquo;</a>
		</div>
		
		<!--Sign In popup-->
		<div id="signInPopup">
			<center>
				<div >
					<form>
					<p class="error" id="error-signIn">* The username and/or password are incorrect</p>
					<label for="userName-signIn">User Name:</label><input type = "text" id = "userName-signIn" name="userName-signIn" placeholder="User Name" />
					<label for="password-signIn">Password:</label><input type = "password" id = "password-signIn" name="password-signIn" placeholder="Password"/>
					<a id="forgotPassword" href="./" style="size: ">
						<br />
					<button class="btn btn-primary" type="button" value="Sign In" id="signIn-submit">Sign In</button>
					<button class="btn" type="button" value="Cancel" id="signIn-cancel">Cancel</button>
					</form>
				</div>
			</center>
		</div>
	</body>
</html>

